<!DOCTYPE html>
<html lang="en">
  <head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>
 
<link rel="stylesheet" href="../assets/css/style.css"/> 
<!-- Copyright 1998-2021 by Northwoods Software Corporation. -->    <title> GoJS Making Images -- Northwoods Software </title>
    <link rel="stylesheet" href="../assets/css/prism.css"  />
  </head>
  <script>
    
    window.diagrams = [];
    window.goCode = function(pre, w, h, parentid, animation) {
      window.diagrams.push([pre, w, h, parentid, animation]);
    }
  </script>
  <body>
  <nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">
    <div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">
      <div class="md:pl-4">
        <a class="text-white hover:text-white no-underline hover:no-underline
        font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../">
          <h1 class="mb-0 p-1 ">GoJS</h1>
        </a>
      </div>
      <button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">
        <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
          <path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
          <path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
      </button>
      <div id="topnavList" class="hidden lg:text-base sm:block items-center w-auto mt-0 text-white p-0 z-20">
        <ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">
          <li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li>
          <li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li>
          <li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li>
          <li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li>
          <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>
          <li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li>
          <li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li>
          <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html"
           target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li>
          <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html"
           target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li>
        </ul>
      </div>
    </div>
    <hr class="border-b border-gray-600 opacity-50 my-0 py-0" />
  </nav>
    
    <div class="md:flex flex-col md:flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">
      
    <div id="navSide" class="flex flex-col w-full md:w-40 lg:w-48 text-gray-700 bg-white flex-shrink-0">
      <div class="flex-shrink-0 px-8 py-4">
        <button id="navButton" class="rounded-lg md:hidden focus:outline-none focus:ring" aria-label="Navigation">
          <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
            <path id="navOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
            <path id="navClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
          </svg>
        </button>
      </div>
      <nav id="navList" class="min-h-screen hidden md:block sidebar-nav flex-grow px-1 lg:px-4 pb-4 md:pb-0 md:overflow-y-auto break-words">
  <a href="index.html">Basics</a>
  <a href="buildingObjects.html">Building Parts</a>
  <a href="usingModels.html">Using Models</a>
  <a href="dataBinding.html">Data Binding</a>
  <a href="react.html">GoJS with React</a>
  <a href="angular.html">GoJS with Angular</a>
  <a href="textBlocks.html">TextBlocks</a>
  <a href="shapes.html">Shapes</a>
  <a href="pictures.html">Pictures</a>
  <a href="panels.html">Panels</a>
  <a href="tablePanels.html">Table Panels</a>
  <a href="brush.html">Brushes</a>
  <a href="sizing.html">Sizing Objects</a>
  <a href="itemArrays.html">Item Arrays</a>
  <a href="changedEvents.html">Changed Events</a>
  <a href="transactions.html">Transactions</a>
  <a href="viewport.html">Coordinates</a>
  <a href="initialView.html">Initial View</a>
  <a href="collections.html">Collections</a>
  <a href="links.html">Links</a>
  <a href="linkLabels.html">Link Labels</a>
  <a href="connectionPoints.html">Link Points</a>
  <a href="ports.html">Ports</a>
  <a href="nodes.html">Nodes</a>
  <a href="debugging.html">Debugging</a>
  <a href="layouts.html">Layouts</a>
  <a href="trees.html">Trees</a>
  <a href="subtrees.html">SubTrees</a>
  <a href="groups.html">Groups</a>
  <a href="subgraphs.html">SubGraphs</a>
  <a href="sizedGroups.html">Sized Groups</a>
  <a href="selection.html">Selection</a>
  <a href="highlighting.html">Highlighting</a>
  <a href="animation.html">Animation</a>
  <a href="toolTips.html">ToolTips</a>
  <a href="contextmenus.html">Context Menus</a>
  <a href="events.html">Diagram Events</a>
  <a href="tools.html">Tools</a>
  <a href="commands.html">Commands</a>
  <a href="permissions.html">Permissions</a>
  <a href="validation.html">Validation</a>
  <a href="HTMLInteraction.html">HTML Interaction</a>
  <a href="layers.html">Layers &amp; Z-ordering</a>
  <a href="palette.html">Palette</a>
  <a href="overview.html">Overview</a>
  <a href="resizing.html">Resizing Diagrams</a>
  <a href="replacingDeleting.html">Replacing and Deleting</a>
  <a href="buttons.html">Buttons</a>
  <a href="templateMaps.html">Template Maps</a>
  <a href="legends.html">Legends and Titles</a>
  <a href="extensions.html">Extensions</a>
  <a href="geometry.html">Geometry Strings</a>
  <a href="grids.html">Grid Patterns</a>
  <a href="graduatedPanels.html">Graduated Panels</a>
  <a href="makingImages.html">Diagram Images</a>
  <a href="makingSVG.html">Diagram SVG</a>
  <a href="printing.html">Printing</a>
  <a href="serverSideImages.html">Server-side Images</a>
  <a href="nodeScript.html">GoJS in Node.js</a>
  <a href="testing.html">Testing</a>
  <a href="storage.html">Storage</a>
  <a href="performance.html">Performance</a>
  <a href="source.html">Building from Source</a>
  <a href="platforms.html">Platforms</a>
  <a href="deployment.html">Deployment</a>
      </nav>
    </div>      
      <div class="pt-4 px-2 md:px-0 lg:px-4 pb-16 w-full overflow-hidden">


  <style type="text/css">
  .images {
    border: 1px solid rgba(255,0,0,.4);
  }

  /* make HRs thicker to set them apart from the code section borders */
  hr {
      height: 3px;
      background: #333;
  }
  </style>



<h1>Making Images</h1>
<p>
<b>GoJS</b> has two functions for creating images: <a>Diagram.makeImageData</a>, which outputs a Base64 image data string, and <a>Diagram.makeImage</a>, which is a convenience function that calls <a>Diagram.makeImageData</a> and returns a new HTMLImageElement with the image data as its source. Both functions have the same single argument, a JavaScript Object that contains several definable properties, enumerated in the documentation.
</p>
<p>
  This page is almost identical to the page on <a href="makingSVG.html">Making SVG</a>, which shows how to render SVG elements instead of PNG images.
</p>
<!-- Don't bother showing this source -->
<pre class="lang-js" id="diag" style="display: none;"><code>
  // define a simple Node template (but use the default Link template)
  diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle",
        // Shape.fill is bound to Node.data.color
        new go.Binding("fill", "color")),
      $(go.TextBlock,
        { margin: 3 },  // some room around the text
        // TextBlock.text is bound to Node.data.key
        new go.Binding("text", "key"))
    );

  // create the model data that will be represented by Nodes and Links
  var nodeDataArray = [
    { key: "Alpha", color: "lightblue" },
    { key: "Beta", color: "orange" },
    { key: "Gamma", color: "lightgreen" },
    { key: "Delta", color: "pink" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" },
    { from: "Alpha", to: "Gamma" },
    { from: "Beta", to: "Beta" },
    { from: "Gamma", to: "Delta" },
    { from: "Delta", to: "Alpha" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
  window.myDiagram = diagram;

</code></pre>
<script>goCode("diag", 300, 150)</script>
<script>
  window.extras = [];
  window.goCode2 = function(pre) {
    extras.push([pre, '2']);
  }
  window.goCode3 = function(pre) {
    extras.push([pre, '3']);
  }
  window.addImage = function(img) {
    obj = document.getElementById("severalImages");
    img.className = "images";
    obj.appendChild(img)
  }

  window.extra = function() {
    for (var i = 0; i < extras.length; i++) {
      var ex = extras[i];
      if (ex[1] === '2') { // goCode2
        var pre = document.getElementById(ex[0]);
        var f = eval("(function () {window.img = " + pre.textContent + "\n})");
        f();
        img.className = "images";
        pre.parentElement.insertBefore(img, pre.nextSibling)
      } else { // goCode3
        var pre = document.getElementById(ex[0]);
        var f = eval("(function () {" + pre.textContent + "\n})");
        f();
      }
    }
  }
</script>
<hr/>
<p>
Calling makeImage with no arguments or with an empty properties object results in an image that is the same size as the Diagram's viewport.
</p>
<pre class="lang-js" id="code0"><code>
myDiagram.makeImage();
</code></pre>
<script>goCode2("code0");</script>

<hr/>
<p>
Calling makeImage with an object that has the "scale" property set to 1 results in an image that includes the whole diagram,
not just the area visible in the viewport.  However, the empty areas around the document bounds are trimmed away.
</p>
<pre class="lang-js" id="codeA"><code>
myDiagram.makeImage({
  scale: 1
});
</code></pre>
<script>goCode2("codeA");</script>

<hr/>
<p>
Setting the scale property will create a scaled image that is precisely large enough to contain the Diagram. The following image is created with a scale of 2.
</p>
<pre class="lang-js" id="code1"><code>
myDiagram.makeImage({
  scale: 2
});
</code></pre>
<script>goCode2("code1");</script>

<hr/>

<p>
The following image is created by setting the size option of makeImage. Note that the canvas is scaled uniformly and any extra space is placed on the bottom or right side of the image.
</p>
<pre class="lang-js" id="code2"><code>
myDiagram.makeImage({
  size: new go.Size(100,100)
});
</code></pre>
<script>goCode2("code2");</script>

<hr/>

<p>The following image is also created by setting the size option of makeImage, but only the width is set. The height will be whatever size is needed to uniformly contain the Diagram.</p>
<pre class="lang-js" id="code3"><code>
myDiagram.makeImage({
  size: new go.Size(100,NaN)
});
</code></pre>
<script>goCode2("code3");</script>

<hr/>

<p>The parts option allows us to specify an <a>Iterable</a> collection of Parts to draw. This is useful if you only want to make an image of part of the diagram, such as a selection of nodes.</p>
<pre class="lang-js" id="code4a"><code>
  myPartsList = new go.List();
  myPartsList.add(myDiagram.findNodeForKey("Beta"));
  myPartsList.add(myDiagram.findNodeForKey("Delta"));
</code></pre>
<script>goCode3("code4a");</script>
<pre class="lang-js" id="code4"><code>
myDiagram.makeImage({
  parts: myPartsList
});
</code></pre>
<script>goCode2("code4");</script>
<p>Or simply drawing only the links:</p>
<pre class="lang-js" id="code4-2"><code>
myDiagram.makeImage({
  parts: myDiagram.links
});
</code></pre>
<script>goCode2("code4-2");</script>

<hr/>

<p>Setting both scale and size creates an image that is scaled specifically and cropped to the given size, as in the following image.</p>
<pre class="lang-js" id="code5"><code>
myDiagram.makeImage({
  scale: 1.5,
  size: new go.Size(100,100)
});
</code></pre>
<script>goCode2("code5");</script>

<hr/>

<p>We may want a very large, scaled image that has a limit on its size, and we can use the maxSize property to constrain one or both dimensions. The following image has a very large scale applied but is limited in size horizontally, so some horizontal cropping will occur.</p>
<p>The default value for maxSize is <code>go.Size(2000, 2000)</code>, and specifying <code>go.Size(600, NaN)</code> is equivalent to specifying <code>go.Size(600, 2000)</code>. If we wanted no cropping on the height we could instead write <code>go.Size(600, Infinity)</code>.</p>
<pre class="lang-js" id="code6"><code>
myDiagram.makeImage({
  scale: 9,
  maxSize: new go.Size(600, NaN)
});
</code></pre>
<script>goCode2("code6");</script>

<hr/>

<p>Setting both position and size creates a diagram image that is positioned specifically and cropped to the given size. When a position is set but no scale is set, the scale defaults to 1.</p>
<pre class="lang-js" id="code7"><code>
myDiagram.makeImage({
  position: new go.Point(20,20),
  size: new go.Size(50,50)
});
</code></pre>
<script>goCode2("code7");</script>

<p>Setting the background to a CSS color string will replace the transparent Diagram background with the given color.</p>
<pre class="lang-js" id="code8"><code>
myDiagram.makeImage({
  size: new go.Size(NaN,250),
  background: "rgba(0, 255, 0, 0.5)" // semi-transparent green background
});
</code></pre>
<script>goCode2("code8");</script>

<hr/>

<p>In the following code we use the document bounds to split the Diagram into four equal parts, making four images out of each part. In this way we can prepare images for pagination, making a gallery, or printing purposes. The four images created are shown below.</p>
<pre class="lang-js" id="manyImgCode"><code>
    var d = myDiagram.documentBounds;
    var halfWidth = d.width / 2;
    var halfHeight = d.height / 2;
    img = myDiagram.makeImage({
            position: new go.Point(d.x, d.y),
            size: new go.Size(halfWidth,halfHeight)
          });
    addImage(img); // Adds the image to a DIV below

    img = myDiagram.makeImage({
            position: new go.Point(d.x + halfWidth, d.y),
            size: new go.Size(halfWidth,halfHeight)
          });
    addImage(img);

    img = myDiagram.makeImage({
            position: new go.Point(d.x, d.y+ halfHeight),
            size: new go.Size(halfWidth,halfHeight)
          });
    addImage(img);

    img = myDiagram.makeImage({
            position: new go.Point(d.x + halfWidth, d.y + halfHeight),
            size: new go.Size(halfWidth,halfHeight)
          });
    addImage(img);
</code></pre>
<div id="severalImages"></div>
<script>goCode3("manyImgCode");</script>

<hr/>

<h2 id="ImageType">Image Type</h2>
<p>
We can set the type and details properties of the argument object in order to retrieve different kinds of images. The only widely supported type is "image/jpeg". The details for a jpeg determine its quality by using values from 0 to 1 inclusive. Jpegs are not commonly used for Diagrams because their lossy compression can render text unreadable.
</p>
<p>
The following image is an outputted jpeg. Note how the transparent background is turned black, because the jpeg format does not support alpha transparency, and the default state of the HTML5 canvas is that of fully transparent black pixels, rgba(0,0,0,0).
</p>
<pre class="lang-js" id="codea1"><code>
myDiagram.makeImage({
  scale: 1,
  type: "image/jpeg"
});
</code></pre>
<script>
goCode2("codea1");
</script>

<hr/>

<p>
The following image is a jpeg created with an AntiqueWhite background specified.
</p>
<pre class="lang-js" id="codea2"><code>
myDiagram.makeImage({
  scale: 1,
  background: "AntiqueWhite",
  type: "image/jpeg"
});
</code></pre>
<script>
goCode2("codea2");
</script>

<hr/>

<p>
The following image is a jpeg created (with an AntiqueWhite background) and the details option, at very low quality.
</p>
<pre class="lang-js" id="codea3"><code>
myDiagram.makeImage({
  scale: 1,
  background: "AntiqueWhite",
  type: "image/jpeg",
  details: 0.05
});
</code></pre>
<script>
goCode2("codea3");
</script>

<hr/>

<h2 id="DownloadingImages">Downloading Images</h2>
<p>
You do not need to involve the web server if you want the user to download an image.
See the sample <a href="../samples/minimalBlob.html" target="_blank">Minimal Blob</a>.
Note that that sample only downloads a single image.
</p>
<p>
We suggest that you use SVG for downloading an image, if that choice is acceptable to your users.
That sample is at <a href="../samples/minimalSvg.html" target="_blank">Minimal SVG</a>.
</p>

      </div>
    </div>
  
  <div class="bg-nwoods-primary">
    <section class="max-w-screen-lg text-white container mx-auto py-2 px-12">
      <p id="version" class="leading-none mb-2 my-4">GoJS</p>
    </section>
  </div><footer class="bg-nwoods-primary text-white">
  <div class="container max-w-screen-lg mx-auto  px-8">
    <div class="w-full py-6">

        <div class="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8">
          <ul class="text-sm font-medium pb-14 sm:pb-20 grid grid-cols-1 sm:grid-cols-3 gap-y-10">
            <li class="list-none row-span-2">
              <h2 class="text-base font-semibold tracking-wide">GoJS</h2>
              <ul class="list-none space-y-4 md:space-y-1 px-0">
                <li>
                  <a href="../samples/index.html">Samples</a>
                </li>
                <li>
                  <a href="../learn/index.html">Learn</a>
                </li>
                <li>
                  <a href="../intro/index.html">Intro</a>
                </li>
                <li>
                  <a href="../api/index.html">API</a>
                </li>
                <li>
                  <a href="../changelog.html">Changelog</a>
                </li>
                <li>
                  <a href="https://github.com/NorthwoodsSoftware/GoJS">GitHub</a>
                </li>
              </ul>
            </li>
            <li class="list-none row-span-2">
              <h2 class="text-base font-semibold tracking-wide">Support</h2>
              <ul class="list-none space-y-4 md:space-y-1 px-0">
                <li>
                  <a href="https://www.nwoods.com/contact.html"
                  target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a>
                </li>
                <li>
                  <a href="https://forum.nwoods.com/c/gojs">Forum</a>
                </li>
                <li>
                  <a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a>
                </li>
                <li>
                  <a href="https://www.nwoods.com/sales/index.html"
                  target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a>
                </li>
                <li>
                  <a href="https://www.youtube.com/channel/UC9We8EoX596-6XFjJDtZIDg">Videos</a>
                </li>
              </ul>
            </li>
            <li class="list-none row-span-2">
              <h2 class="text-base font-semibold tracking-wide">Company</h2>
              <ul class="list-none space-y-4 md:space-y-1 px-0">
                <li>
                  <a href="https://www.nwoods.com">Northwoods</a>
                </li>
                <li>
                  <a href="https://www.nwoods.com/about.html">About Us</a>
                </li>
                <li>
                  <a href="https://www.nwoods.com/contact.html">Contact Us</a>
                </li>
                <li>
                  <a href="https://twitter.com/northwoodsgo">Twitter</a>
                </li>

              </ul>
            </li>
          </ul>


      <p class="text-sm text-gray-100 md:mb-6">
        Copyright 1998-2021 <a class="text-white" href="https://www.nwoods.com">Northwoods Software</a>
      </p>
    </div>
  </div>
</footer>  </body>

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script> 
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date()); gtag('config', 'UA-1506307-5');
  var getOutboundLink = function(url, label) {
    gtag('event', 'click', {
      'event_category': 'outbound',
      'event_label': label,
      'transport_type': 'beacon'
    });
  }

  // topnav
  var topButton = document.getElementById("topnavButton");
  var topnavList = document.getElementById("topnavList");
  topButton.addEventListener("click", function() {
    this.classList.toggle("active");
    topnavList.classList.toggle("hidden");
    document.getElementById("topnavOpen").classList.toggle("hidden");
    document.getElementById("topnavClosed").classList.toggle("hidden");
  });
</script>
  <script src="../assets/js/prism.js"></script>
  <script src="../release/go.js"></script>
  <script src="../assets/js/goDoc.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      if (window.go) document.getElementById('version').textContent = "GoJS version " + go.version;
      if (window.goDoc) window.goDoc();
      var d = window.diagrams;
      for (var i = 0; i < d.length; i++) {
        var dargs = d[i];
        goCodeExecute(dargs[0], dargs[1], dargs[2], dargs[3], dargs[4]);
      }
      if (window.extra) window.extra();
    });
  </script>
</html>
